

// 表头数据主页面

import React, { Component } from "react";
import {
  Space,
  Table,
  // Switch,
  Pagination,
  DatePicker,
  Button,
  Dropdown,
  Menu,
  Input,
  Tag
} from "antd";
import {AudioOutlined } from "@ant-design/icons";
import AntDesign from './AntDesign'
import Redact from "./Redact";

// import { color } from "echarts";
import url from '../../../config/url'
import req from '../../../http/req'
import Searche from "./Search";


const columns = [
  {
    title: "序号",
    dataIndex: "id",
    key: "id",
    align: 'center',
  },

  {
    title: "用户名",
    dataIndex: "username",
    key: "username",
    align: 'center',
  },
  {
    title: "手机号",
    dataIndex: "mobile",
    key: "mobile",
    align: 'center',
  },
  {
    title: "邮箱",
    key: "email",
    dataIndex: "email",
    align: 'center',
    // render: (_, { tags }) => (
    //   <>
    //     {tags.map((tag) => {
    //       let color = tag.length > 5 ? 'geekblue' : 'green';

    //       if (tag === 'loser') {
    //         color = 'volcano';
    //       }

    //       return (
    //         <Tag color={color} key={tag}>
    //           {tag.toUpperCase()}
    //         </Tag>
    //       );
    //     })}
    //   </>
    // ),
  },

  {
    title: "性别",
    key: "gender",
    dataIndex: "gender",
    align: 'center',
    render: (gender) => {
            if (gender === '1') {
              return <Tag color="blue">男</Tag>
          }
          if (gender === '2') {
              return <Tag color="pink">女</Tag>
          }
          if (gender === '3') {
              return <Tag color="green">保密</Tag>
          }
    },
  },

  {
    title: "操作",
    key: "action",
    align: 'center',
    render: (_, record) => (
      <Space size="middle">
        {/* 编辑组件 */}
           
      <Redact record={record} />
         
      </Space>
  ),
    // render: (_, record) => (
    //   <Space size="middle">
    //     <Switch defaultChecked onChange={onChange} />
    //     {record.render}
    //   </Space>
    // ),
    //   render: (_, record) => (
    //     <Space size="middle">
    //       <a>Invite {record.name}</a>
    //       <a>Delete</a>
    //     </Space>
    //   ),
  },

  
];


class Index extends Component {
  state = {
    data:[],
    page: 1, // 默认从第一页加载数据
    limit:10, // 默认每页显示十个数据
    total:0, // 默认总数
}
  render() {
    // const onChange = (checked) => {
    //   console.log(`switch to ${checked}`);
    // };
    // 时间
    const { RangePicker } = DatePicker;
    
    // 输入框
    const { Search } = Input;
    const suffix = (
      <AudioOutlined
        style={{
          fontSize: 16,
          color: "#1890ff",
        }}
      />
    );

    const onSearch = (value) => console.log(value);

    // 下拉框
    const menu = (
      <Menu
        items={[
          {
            key: "1",
            label: (
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="https://www.antgroup.com"
              >
                一号大棚
              </a>
            ),
          },
          {
            key: "2",
            label: (
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="https://www.aliyun.com"
              >
            二号大棚
              </a>
            ),
          },
          {
            key: "3",
            label: (
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="https://www.luohanacademy.com"
              >
                三号大棚
              </a>
            ),
          },
        ]}
      />
    );

    return (
      <div>
        {/* 表头 */}
        <div style={{margin:'10px 0 30px 0'}}>
          <button  style={{margin:' 0 10px',borderRadius:'5px'}}>
           <b>全部</b>
          </button>

          {/* 时间 */}
          <RangePicker showTime style={{borderRadius:'5px'}} />

          {/* 下拉框 */}
          <Dropdown overlay={menu} placement="bottomLeft" arrow>
            <Button  style={{margin:' 0 30px 0 20px', color:' #b1afaf',borderRadius:'5px'}}>选择大棚</Button>
          </Dropdown>
          {/* 输入框 */}
          {/* <Space direction="vertical"  /> */}

          {/* <Search
            placeholder="请输入您要搜索的内容"
            onSearch={onSearch}
            style={{
              width: 200,
              borderRadius:'5px'
            }}
          />
          <Space /> */}
          <Searche
          />



          {/* 按钮 */}

            {/* <Button type="primary" style={{margin:'0 30px',borderRadius:'5px'}}>查询</Button> */}

            {/* <Button  style={{backgroundColor:'red' ,  color:' #fff',margin:'0 10px 0 150px',borderRadius:'5px'}}>导入 */}

            <AntDesign/>

            {/* </Button> */}
{/* 
            <Button  style={{backgroundColor:'green', color:' #fff',borderRadius:'5px'}}>导出</Button> */}
            
        </div>




        {/* 表格 */}
        <Table 
        columns={columns} 
        dataSource={this.state.data} 
        pagination={false}
        rowKey="id" />
        {/* 分页器 */}
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            marginTop: "10px",
          }}
        >  
          
          <Pagination 
           onChange={this.loadData}
            current={this.state.page}
            total={this.state.total}/>
        </div>
      </div>
    );
  }
  
  componentDidMount() {
    const { page, limit } = this.state
    this.loadData(page, limit)
}

// 加载数据的方法
loadData = (page, limit) => {
 
    req.get(url.GetUsersData, {
        params: {
            page,
            limit,
            
        },
    }).then((res) => {
     
        this.setState({
            data: res.data.paginate.data,
            total: res.data.paginate.total,
            page: page,
            limit: limit,
        })
    })
}
}

export default Index;
